<template>
    <view>
        <Header returnIcon="white" :background="background" :title="title" />
        <view class="content" :style="{'height': `${noBarHeight}px`}">
            <view class="main">
                <view class="opinion">
                    <span class="title">意见:</span>
                    <text>{{detail.content}}</text>
                </view>
                <view class="reply_black" v-for="(item, index) in detail.replys" :key="index">
                    <view class="reply">
                        <span class="title">回复:</span>
                        <text>{{item.content}}</text>
                    </view>
                    <view class="times">{{ item.time }}</view>
                </view>
            </view>
            <view class="btn" @click="onSubmit">继续反馈</view>
        </view>

    </view>
</template>
<script>
import CheckTitle from "@/components/CheckTitle.vue";
import Header from "@/components/Header.vue";
import {feedbackDetail} from "../../../utils/api/user";
var app = getApp()
export default ({
    name: "help",
    data() {
        return {
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
            title: '回复内容',
            noBarHeight: app.globalData.noBarHeight,
            id: '',
            detail: ''
        }
    },
    components: {
        Header
    },
    onLoad(options) {
        this.id = options.id
    },
    onShow() {
        this.getReplyInfo()
    },
    methods: {
        getReplyInfo() {
            const params = {
                uid: uni.getStorageSync('uid'),
                id: this.id
            }
            feedbackDetail(params).then(res => {
                this.detail = res.data
            })
        },
        onSubmit() {
            uni.navigateTo({
                url: `../opinionSubmit/opinionSubmit?id=${this.id}`
            })
        }
    }
})
</script>

<style scoped lang="scss">
.content {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background: #f8f8f8;
    overflow-y: auto;
    .main {
        width: 100%;
        min-height: 440rpx;
        background: white;
        margin: 12rpx 0 24rpx 0;
        padding: 40rpx;
        box-sizing: border-box;
        .opinion {
            margin-bottom: 20rpx;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #9B9B9B;
            line-height: 40rpx;
            .title {
                color: #494949;
                font-weight: bold;
                margin-right: 10rpx;
            }
        }
        .reply_black {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #494949;
            line-height: 40rpx;
            margin-bottom: 20rpx;
            .reply {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                color: #494949;
                line-height: 40rpx;
                .title {
                    font-weight: bold;
                    margin-right: 10rpx;
                }
            }
        }
        .times {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #C3C3C3;
            line-height: 40rpx;
            width: 100%;
            text-align: right;
        }
    }
    .btn {
        width: 90%;
        height: 88rpx;
        background: linear-gradient(180deg, #8E4EF7 0%, #5162FD 100%);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40rpx;
    }
}
</style>
